<template>
	<div>
		<div class="title">热搜推荐</div>
		<ul>
			<li class="items border-topbottom" v-for="item of recommendList" :key="item.id">
				<img class="items-img" :src='item.imgUrl' alt=""/>
				<div class="items-ifo">
					<p class="items-pro">{{item.title}}</p>
					<p class="items-desc">{{item.desc}}</p>
					<button class="item-btn">查看详情</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
// data() {
// 	return {
// RecommendList: [{
// 	id: '0001',
//   imgUrl: 'https://imgs.qunarzz.com/p/p26/201302/28/d98c85ce311ea98693835fbb.jpg_256x160_5197fb68.jpg',
//   pro: '乐享张家界',
//   desc: '张家界是一很好的界是好的地方'
//   },{
// 	id: '0002',
//   imgUrl: 'https://imgs.qunarzz.com/p/p26/201302/28/d98c85ce311ea98693835fbb.jpg_256x160_5197fb68.jpg',
//   pro: '乐享张家界',
//   desc: '张家界是好的地的地好的地好的地方'
//   },{
// 	id: '0003',
//   imgUrl: 'https://imgs.qunarzz.com/p/p26/201302/28/d98c85ce311ea98693835fbb.jpg_256x160_5197fb68.jpg',
//   pro: '乐享张家界',
//   desc: '张家界是好的地方'
//   }]
// }
// }
}

</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
	.title
		margin-top: .2rem
		font-size: 0.42rem
		background: #eee
		line-height: .68rem
	.items
		overflow:hidden
		display: flex
		height: 1.9rem
		font-size: .32rem
		mini-width: 0
		.items-img
			height: 1.7rem
			width: 1.7rem
			padding: .1rem
		.items-ifo
			min-width:0
			.items-pro
				flex: 1
				font-size: .35rem
				padding: .1rem 0
				Ellipsis()
			.items-desc
				flex: 1
				line-height: .44rem
				font-size: .30rem
				color: #aaa
				Ellipsis()
			.item-btn
				background: #ff9300
				padding: 0 .1rem
				font-size: .33rem
				border: none
				margin-top: .35rem
				border-radius : .06rem
</style>
